<template>
    <!-- <el-card> -->
    <div class="state">
        <div>
            用户状态：
        </div>
        <div>
            <div v-if="false">

                <el-button type="primary" plain round>
                    <el-icon class="el-icon--right">
                        <User />
                    </el-icon>
                    在职
                </el-button>
                <el-button type="primary" plain round>
                    <el-icon class="el-icon--right">
                        <Bell />
                    </el-icon>
                    待培训
                </el-button>
                <el-button type="primary" plain round>
                    <el-icon class="el-icon--right">
                        <Clock />
                    </el-icon>
                    待上岗
                </el-button>
                <el-button type="primary" plain round>
                    <el-icon class="el-icon--right">
                        <CircleClose />
                    </el-icon>
                    已离职
                </el-button>

            </div>

            <div>

                <el-button v-for="(val, index) in butWhile" type="primary" :plain="index !== active"
                    @click="getdifferPower(val)" round>
                    <el-icon v-if="val.label != '全部'" class="el-icon--right">
                        <User />
                    </el-icon>
                    {{ val.label }}
                </el-button>

            </div>
        </div>
    </div>

    <!-- </el-card> -->
</template>

<script setup>
import { User, Bell, Clock, CircleClose } from '@element-plus/icons-vue'
import { reactive, ref } from "vue"
import { mainStore } from "@/stores"
// import { staffData } from "@/stores/staff.js"
let emit = defineEmits(["getdifPower"])
let mStore = mainStore()
// let mStaff = staffData()
let active = ref(0)
let butWhile = reactive([
    {
        label: "全部",
        value: 0,
        power: 0
    },
    {
        label: "管理员",
        value: 1,
        power: 1
    },
    {
        label: "商家",
        value: 2,
        power: 2
    },
    // {
    //     label: "组长",
    //     value: 3,
    //     power: 3
    // },
    // {
    //     label: "质检员",
    //     value: 4,
    //     power: 4
    // },
    // {
    //     label: "内容审核员",
    //     value: 5,
    //     power: 5
    // },
    //    {
    //     label:"还没有职位的员工",
    //     value:6,
    //     power:6
    //    },
    // {
    //     label: "自己组成员",
    //     value: 6,
    //     power: 7
    // }
])


// 点击获取不同类型的数据
let getdifferPower = (data) => {
    active.value = data.value
    // console.log(data)
    emit("getdifPower", data.power)
}


</script>

<style lang="scss" scoped>
// .el-card{
//     margin: 0;
.state {
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

// padding-bottom: 15px;

// }
</style>